<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .flex-container {
      width: 400px;
      height: 100px;
      background-color: skyblue;
      /* 弹性布局 */
      display: flex;
      flex-wrap: wrap;
      align-items: center;
    }
    .flex-item {
      width: 50px;
      line-height: 50px;
      font-size: 30px;
      color: #fff;
      text-align: center;
    }
    /*  剩余（400-150）px  放大后的值为 50 + 250 * 0.1 = 75px */
    .flex-item:nth-child(1) {
      flex-grow: 0.1;
      background-color: tomato;
    }
    .flex-item:nth-child(2) {
      flex-grow: 0.2;
      background-color: khaki;
    }
    .flex-item:nth-child(3) {
      flex-grow: 0.3;
      background-color: pink;
    }
  </style>
<body>
    <!-- 
        TIP
        flex-grow 设置 flex 项目 主尺寸（main size） 的 flex 增长系数

        主尺寸是项目的宽度还是高度，这取决于flex-direction值

        flex-grow 属性，在 Flex 容器有剩余空间时生效（默认主轴为水平轴）

        剩余空间 = flex 容器宽大小 - 所有 flex 项目占位宽加起来的大小
        剩余空间的值一定要是大于 0 的，否则就是没有剩余空间
        flex-grow 的默认值为 0，表示即使有剩余空间，也不增长（放大）

        flex-grow 的值为>=0 的数字时，需要按下面公式来计算每个项目的增长宽

        TIP
            当所有项目的 flex-grow 值的总和加起来 < 1 时
            项目放大后宽（width 属性） = 项目原始宽 + 剩余空间 * 项目的 flex-grow 值

            当所有项目的 flex-grow 值的总和加起来 >= 1 时
            项目放大后宽 = 项目原始宽 + 剩余空间 * （flex-grow 值） / 所有项目的 flex-grow 值总和
    -->
</body>

<div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
  </div>
</html>